<template>
  <div class="ikun-basehome-container ikun-copy-container">
    <div v-show="!data.showInside" style="height:100%">
      <div class="ikun-copy-lists">
        <el-card class="box-card ikun-copy-list" v-for="(copy, index) in data.instanceList" :key="index" shadow="hover">
          <template #header>
            <div class="card-header">
              <span>{{ copy.instanceName }}</span>
              <el-button text @click="joinInstance(copy.id)">进入副本</el-button>
            </div>
          </template>
          <!-- <div v-for="o in 4" :key="o" class="text item">{{ 'List item ' + o }}</div> -->
          <div class="text">{{ "准入等级 " + copy.accessLevel }}</div>
          <div class="text">{{ "副本层数 " + copy.floorNum }}</div>
          <div class="text">{{ "副本介绍 " + copy.instanceInfo }}</div>
          <!-- <div class="text item">{{ '准入等级 ' + copy.accessLevel }}</div> -->
        </el-card>
      </div>
      <div class="demo-pagination-block">
        <el-pagination :current-page="data.currentPage" :page-size="data.pageSize"
                       layout="prev, pager, next, jumper,sizes" :total="data.total" :page-sizes="[10, 20, 30, 40]"
                       :hide-on-single-page="data.total <= data.pageSize" @size-change="handleSizeChange"
                       @current-change="handleCurrentChange" />
      </div>
    </div>
    <div v-show="data.showInside" class="ikun-copy-fight">
      <div class="ikun-copy-left-container">
        <div class="ikun-copy-battle-process" v-for="(process, index) in data.battleProcess" :key="index">
          {{ process.process }}
        </div>
      </div>
      <el-divider direction="vertical" />
      <div class="ikun-copy-dungeon-level">
        <el-table :data="data.dungeonLevelList">
          <el-table-column type="index" label="层数" />
          <el-table-column label="名称" prop="npcName" />
          <el-table-column label="掉落物" prop="dropPropsStr" />
          <el-table-column label="是否Boss">
            <template v-slot="scope">
              <el-switch disabled :value="scope.row.bossFlag" />
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template v-slot="scope">
              <el-button
                plain
                type="info"
                v-show="scope.row.floor == data.currentFloor"
                @click="handleChallenge(scope.row)"
              >
                战斗
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { instanceList, joinInstance, challenge } from "@/api/index";
import store from "../../../store";

@Component({
  components: {}
})
export default class CopyView extends Vue {
  data = {
    currentPage: 1,
    pageSize: 10,
    total: 11,
    instanceList: [
      {
        instanceName: "",
        accessLevel: "",
        floorNum: "",
        instanceInfo: "",
        id: ""
      }
    ],
    showInside: false,
    dungeonLevelList: [
      {
        "id": 1,
        "createBy": null,
        "createTime": "2023-10-24 00:33:13",
        "updateBy": null,
        "updateTime": "2023-10-24 00:33:13",
        "delFlag": false,
        "instanceId": 1,
        "npcName": "断角狂魔*迪迦",
        "playerId": 180,
        "bossFlag": false,
        "increaseRatio": 1.1,
        "floor": 0,
        "dropIds": "1",
        "defeatFlag": true,
        "dropIdList": [
          "1"
        ]
      }
    ],
    currentFloor: null,
    battleProcess: [
      {
        process: "青山湿遍君不知，一江清水独自流"
      }
    ]
  };

  created() {
    let queryData = {
      "page": {
        "current": this.data.currentPage,
        "size": this.data.pageSize,
        "orders": [
          {
            "column": "accessLevel",
            "asc": false
          }
        ]
      }
    };
    this.getInstanceList(queryData);
  }

  getInstanceList(data: any) {
    instanceList(data).then((res: any) => {
      this.$set(this.data, "instanceList", res.data);
      this.$set(this.data, "total", this.data.instanceList.length);
    });
  }

  handleSizeChange() {
  }

  handleCurrentChange() {
  }

  joinInstance(id: any) {
    let data = {
      playerId: store.state.userInfo.id,
      // playerId: 388,
      instanceId: id
    };
    joinInstance(data).then((res: any) => {
      console.log(res, "joinInstance");
      this.$set(this.data, "dungeonLevelList", res.data.npcList);
      this.$set(this.data, "currentFloor", res.data.record.currentFloor);
      this.$set(this.data, "showInside", true);
      console.log(this.data.currentFloor, this.data.dungeonLevelList);
    });
  }

  handleChallenge(npc: any) {
    let data = {
      playerId: store.state.userInfo.id,
      // playerId: 388,
      npc: npc
    };
    challenge(data).then((res: any) => {
      // console.log(res)
      if (res.data.success) {
        this.$set(this.data, "currentFloor", res.data.currentFloor);
        this.$set(this.data, "battleProcess", res.data.processList);
      } else {
        this.$message({
          showClose: true,
          message: "挑战失败，请重新进入副本挑战！",
          center: true
        });
        this.$set(this.data, "showInside", false);
      }

    });
  }
}
</script>
<style lang="stylus">
@import "./style.styl"
</style>
